<template>
    <!-- 经历 -->
    <div class="view-content">
        <!-- 工作经历 -->
        <div class="block">
            <h3>工作经历</h3>
            <el-timeline>
                <el-timeline-item v-for="item in experience" :key="item.label" :timestamp="item.label" placement="top" color="var(--primary-color)">
                    <div class="experience">
                        <div class="left">
                            <h4>{{ item.company }}</h4>
                            <div>角色：{{ item.role }}</div>
                            <div>
                                工作内容：
                                <pre class="">{{ item.content }}</pre>
                            </div>
                        </div>
                        <div class="right">
                            <h4>智工邦Saas（自研）</h4>
                            <div>
                                工作内容：
                                <pre class="">{{ item.content }}</pre>
                            </div>
                        </div>
                    </div>
                </el-timeline-item>
            </el-timeline>
        </div>
        <!-- 项目经验 -->
        <!-- <div class="block">
            <h3>项目经验</h3>
            <el-timeline>
                <el-timeline-item v-for="item in project" :key="item.label" :timestamp="item.label" placement="top" color="var(--primary-color)">
                    <h4>{{ item.title }}</h4>
                    <div>
                        工作内容：
                        <pre class="">{{ item.content }}</pre>
                    </div>
                </el-timeline-item>
            </el-timeline>
        </div> -->
    </div>
</template>
    
<script setup lang="ts">
import { reactive } from 'vue'
const experience = reactive([
    {
        label: '2019-06 - 2023-07',
        company: '深圳市有梦邦信息服务有限公司',
        com_info: '20-99人',
        role: '前端开发',
        content: `1、 负责前端内容的独立开发，包含 PC、H5、小程序等；
2、 进行需求评审，任务拆解及排期；
3、 及时响应线上 bug 并处理；
4、 进行新项目的功能开发及老项目的维护；
5、 负责搭建前端项目，从0-1（PC、小程序、H5）；`,
    }
])

// const project = reactive([
//     {
//         label: '2022-01 - 2023-07',
//         title: '智工邦Saas（自研）',
//         content: `项目描述：智工邦 Saas  是一款工具类软件，为劳务公司提供发布招聘职位、员工管理、薪酬发放等功能，主要给劳务公司生成自己的小程序。
// 技术栈：PC端（Vue3 + TypeScript + Ant Design Vue + Vite）、小程序（UNIAPP） 
// 责任描述：
// 1、负责使用uniapp对微信小程序进行独立开发；
// 2、负责PC端后续的版本迭代及维护。
// 技术要点：
// 1、使用 Ant Design Vue  框架封装常用组件；
// 2、使用 Uniapp 开发微信小程序；
// 3、使用 Canvas 绘制并生成图片；
// 4、使用 Typescript 语法校验代码规整；
// 5、使用 ext.json  区分小程序；
// 6、使用小程序 scroll-view  实现页面滚动效果。`
//     }
// ])
</script>
    
<style lang="scss" scoped>
.view-content {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;

    .block {
        .experience{
            display: flex;
            .left{
                width: 500px;
            }
            .right{
                width: calc(100% - 500px);
            }
        }

    }
}
</style>